<template>
	<view class="uni_box home">
		<navbar title='查询结果'>
		</navbar>
		<view class="content">
			<view class="jone">
				<view class="jiben">
					<text class="jitit">基本信息</text>
					<image class="lanquan" src="@/pages_subject/static/img/lanquan.png" />
				</view>
				<view class="jieview">
					<image class="tuceng" src="@/pages_subject/static/img/tuceng.png" />
					<view class="jieright">
						<view class="jieone">
							<text class="laval">考点所在城市：</text>
							<text class="rval">{{info.city}}</text>
						</view>
						<view class="jieone">
							<text class="laval">所在学校：</text>
							<text class="rval">{{info.from_school}}</text>
						</view>
						<view class="jieone">
							<text class="laval">报考学校：</text>
							<text class="rval">{{info.to_school}}</text>
						</view>
						<view class="jieone">
							<text class="laval">类别：</text>
							<text class="rval">{{info.cate}}</text>
						</view>
						<view class="jieone">
							<text class="laval">考试天数：</text>
							<text class="rval">{{info.days}}天</text>
						</view>
					</view>
				</view>
			</view>
			<view class="kthree">
				<view class="ptwo">
					<view class="jiben">
						<text class="jitit">考点试预测结果</text>
						<image class="lanquan" src="@/pages_subject/static/img/lanquan.png" />
					</view>
					<text class="limiao">据历年分配规则与结果进行数据分析得出，准确率92%以上</text>
				</view>
				<view class="cview">
					<view class="cheng">
						<view class="chengone flex-row one">
							序号
						</view>
						<view class="chengone flex-row two">
							报考院校
						</view>
						<view class="chengone flex-row two">
							查询时间
						</view>
						<view class="chengone flex-row one">
							备注
						</view>
					</view>
					<view class="neicheng">
						<view class="chenglist">
							<view class="chengtwoname flex-row one txt">
								长春
							</view>
							<view class="chengtwodaxue flex-row two txt">
								吉林大学
							</view>
							<view class="chengtwodaxue flex-row two txt">
								2020-11-19 20:21:17
							</view>
							<view class="chengtwodaxue flex-row one txt">
								长春
							</view>
						</view>
						<view class="chenglist">
							<view class="chengtwoname flex-row one txt">
								长春
							</view>
							<view class="chengtwodaxue flex-row two txt">
								吉林大学
							</view>
							<view class="chengtwodaxue flex-row two txt">
								2020-11-19 20:21:17
							</view>
							<view class="chengtwodaxue flex-row one txt">
								长春
							</view>
						</view>
					</view>
				</view>
				<image class="qiexian" src="@/pages_subject/static/img/qiexian.png" />
				<view class="ptwo yandu">
					<text class="yantit">研友必读</text>
					<view class="biview">
						<image class="bidu" src="@/pages_subject/static/img/bidu.png" />
						<view class="biitem">
							<view class="duitem" v-for="(item,index) in bidulist" :key="index">
								<text class="dutit">{{item.title}}</text>
								<u-parse class="dumiao" :html="item.content" :tag-style="style"></u-parse>
								<!-- <text class="dumiao">每年考研初试都在12月第4周周末，今年的考研初试是在12月25号开始，如果你考一天，预定的酒店12月24入住12月25退房即可；如果你考两天，预定的酒店12月24入住12月26退房即可；以此类推。</text> -->
							</view>
							<!-- <view class="duitem">
								<text class="dutit">预定哪天的酒店?</text>
								<text class="dumiao">每年考研初试都在12月第4周周末，今年的考研初试是在12月25号开始，如果你考一天，预定的酒店12月24入住12月25退房即可；如果你考两天，预定的酒店12月24入住12月26退房即可；以此类推。</text>
							</view>
							<view class="duitem">
								<text class="dutit">预定哪天的酒店?</text>
								<text class="dumiao">每年考研初试都在12月第4周周末，今年的考研初试是在12月25号开始，如果你考一天，预定的酒店12月24入住12月25退房即可；如果你考两天，预定的酒店12月24入住12月26退房即可；以此类推。</text>
							</view> -->
						</view>
					</view>
				</view>
			</view>	
			<view class="kthree" style="padding: 30rpx;">
				<view class="hcont" v-if="reli">
					<view class="jiben">
						<text class="jitit">{{city_name}}考点分布热力图</text>
						<image class="lanquan" src="@/pages_subject/static/img/lanquan.png" />
					</view>
					<text class="bji">标记五角星的为{{city_name}}所有的考研考点</text>
				</view>
				<image class="tubg" v-for="(item,index) in reli" :key="index" :src="item.image" />
				<text class="chakan" @click="xishow=true">点击产看{{city_name}}所有考研考点</text>

				<view class="review">
					<text class="retu">热力图说明</text>
					<text class="remiao">
						1. 标为五角星的学校为每年的考研考点，主要分布在市区。

						2. 为了确保万无一失，各位研友也可在考点集中的区域根据自己的需求预订备用酒店（切记得预订12月18号之后可随时申请退款的酒店，以防造成损失）。
					</text>
				</view>
			</view>
			<!-- <view class="keview">
				<button  open-type="contact" class="btn">
				
				</button>
				<image class="kefuicon" src="/static/new/kefu.png" />
				<text>联系客服</text>
			</view> -->
		</view>

		<!-- 明细弹窗 -->
		<view class="mxiview">
			<u-popup v-model="xishow" mode="center" :closeable="false" width="100%">
				<view class="mingview">
					<view class="mhead">
						<text class="mbiao">{{city_name}}所有考研考点明细</text>
						<image class="lcha" @click="xishow=false" src="@/pages_subject/static/img/lcha.png" />
					</view>
					<view class="xuitemone">
						<view class="xuone">
							<view class="xuitem flexrow one">
								序号
							</view>
							<view class="xuitem flexrow two">
								考点
							</view>
						</view>
						<scroll-view scroll-y class="xuhaoview">
							<view class="xutwo" v-for="(item,index) in kaolist" :key="index">
								<view class="xuitem flexrow one">
									{{ item.id }}
								</view>
								<view class="xuitem flexrow two kaodian">
									{{ item.dian }}
								</view>
							</view>
						</scroll-view>
						
					</view>
					
				</view>
			</u-popup>
		</view>
		<!-- 支付弹窗 -->
		<!-- <zhipop :dishow="dishow" @shaiclose="dishow=false"></zhipop> -->
		<!-- 城市选择 -->
		<!-- <u-select v-model="cityshow" :list="citylist"></u-select> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cityshow:false,
				citylist:[
					{
						value: '1',
						label: '江'
					},
					{
						value: '2',
						label: '湖'
					}
				],
				style: {
					img: 'width:max-width:100%;height:auto;pointer-events: none;'
				},
				name:'',
				dishow:false,
				kaoshow:false,
				xishow:false,
				order_id:'',
				info:{},
				city_id:'',
				reli:[],
				kaolist:[],
				bidulist:[],
				city_name:''
			}
		},
		onLoad(option) {
			// /pages_subject/twoPage/result?order_id=6&city_id=2
			this.order_id = option.order_id
			this.city_id = option.city_id
			if(option.city_name){
				this.city_name = option.city_name
			}
			
			this.getDetail()
			this.getrelitu();//热力图
			this.getdian();//考点数据
			this.getbidu();//研友必读
		},
		onShow() {
		},
		methods: {
			async getDetail(){
				let res = await this.$u.api.getChaOrder({
					shop_id:uni.getStorageSync('shop_id'),
					order_id:this.order_id
				});
				this.info = res
			},
			async getrelitu(){
				let res = await this.$u.api.getRelitu({
					shop_id:uni.getStorageSync('shop_id'),
					city_id:this.city_id
				});
				this.reli = res
			},
			async getbidu(){
				let res = await this.$u.api.getBidu({
					shop_id:uni.getStorageSync('shop_id')
				});
				this.bidulist = res
			},
			
			async getdian(){
				let res = await this.$u.api.getDianList({
					shop_id:uni.getStorageSync('shop_id'),
					city_id:this.city_id,
					// city:this.city_name
					city:'长春'
				});
				this.kaolist = res
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #fff;
	}
	.content{
		background-color: #fff;
		min-height: 100vh;
		padding-bottom: 120rpx;
		.jiben{
			display: flex;
			flex-direction: row;
			align-items: center;
			position: relative;
			margin-bottom: 15rpx;
			.jitit{
				font-size: 33rpx;
				font-family: PingFang SC;
				font-weight: 800;
				color: #353535;
			}
			.lanquan{
				width: 32rpx;
				height: 32rpx;
				position: relative;
				right: 11px;
				top: -7px;
			}
		}
		.jone{
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 18rpx 0rpx rgba(196,198,255,0.39);
			border-radius: 10rpx;
			margin:20rpx 30rpx 30rpx;
			padding: 30rpx;
			
			.jieview{
				display: flex;
				flex-direction: row;
				.tuceng{
					width: 204rpx;
					height: 315rpx;
					margin-right: 30rpx;
				}
				.jieright{
					flex: 1;
					display: flex;
					flex-direction: column;
					.jieone{
						display: flex;
						flex-direction: row;
						align-items: center;
						margin-bottom: 20rpx;
						.laval{
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 800;
							color: #353535;
						}
						.rval{
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #353535;
						}
					}
					.jieone:last-child{
						margin-bottom: 0;
					}
				}
			}
		}
		.limiao{
			font-size: 22rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #32303E;
		}
		.ptwo{
			padding: 0 35rpx;
		}
		.kthree{
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 18rpx 0rpx rgba(196,198,255,0.39);
			border-radius: 20rpx;
			padding: 35rpx 0rpx;
			margin:40rpx 30rpx;
			.kbiao{
				display: block;
				text-align: center;
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: 800;
				color: #353535;
			}
			.leiji{
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				margin: 35rpx 0 10rpx;
				.leiitem{
					width: 33.33%;
					padding: 0 15rpx;
					margin-bottom: 25rpx;
					.items{
						width: 100%;
						height: 58rpx;
						background: #EEEEEE;
						border-radius: 10rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #353535;
					}
				}
				.lactive{
					.items{
						background: #FF664E;
						color: #fff;
					}
				}
			}
			.gcont{
				display: flex;
				flex-direction: column;
				.gone{
					display: flex;
					flex-direction: row;
					align-items: center;
					margin-bottom: 8rpx;
					.yuan{
						display: inline-block;
						width: 20rpx;
						border-radius: 50%;
						height: 20rpx;
						background: #FF664E;
						margin-right: 10rpx;
					}
					.nei{
						color: #32303E;
						font-size: 28rpx;
						font-weight: 400;
					}
				}
			}

			.cview{
				box-shadow: 0rpx 0rpx 18rpx 0rpx rgba(196,198,255,0.39);
				border-radius: 0rpx;
				margin-top: 30rpx;
			}
			.cheng{
				display: flex;
				flex-direction: row;
				align-items: center;
				
				
			}
			.chengone{
				height: 60rpx;
				background: #0082FB;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				border-right: 1rpx solid #fff;
				.chengone{
					padding: 15rpx;
					
				}
			}
			.flex-row{
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
			}
			.one{
				width: 20%;
			}
			.two{
				width: 30%;
			}
			.neicheng{
				.chenglist{
					padding: 15rpx 0;
					display: flex;
					flex-direction: row;
					align-items: center;
					.chengtwoname{
						display: inline-block;
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 800;
						color: #353535;
						text-align: center;
					}
					.chengtwodaxue{
						display: inline-block;
						font-size: 25rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #353535;
						text-align: center;
					}
				}
				.chenglist:nth-child(even){
					background-color: rgba(89, 97, 245, 0.09);
				}
			}
		}
		.yandu{
			.yantit{
				font-size: 34rpx;
				font-family: PingFang SC;
				font-weight: 800;
				color: #353535;
			}
			.biview{
				display: flex;
				flex-direction: row;
				margin-top: 30rpx;
				.bidu{
					width: 39rpx;
					height: 39rpx;
					margin-right: 9rpx;
					margin-left: 30rpx;
				}
				.biitem{
					display: flex;
					flex-direction: column;
					flex: 1;
					.duitem{
						margin-bottom: 27rpx;
						.dutit{
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 800;
							color: #32303E;
						}
						.dumiao{
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #32303E;
							display: block;
							margin-top: 15rpx;
						}
					}
					.duitem:last-child{
						margin-bottom: 0;
					}
				}
			}
		}
		.hcont{
			display: flex;
			flex-direction: row;
			align-items: center;
		}
		.tubg{
			height: 360rpx;
			width: 100%;
			margin: 20rpx 0 30rpx;
		}
		.chakan{
			display: block;
			text-align: center;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 800;
			color: #0082FB;
		}
		.bji{
			// margin-left: 20rpx;
			font-size: 18rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #FF6430;
		}
		.review{
			display: flex;
			flex-direction: column;
			margin-top: 80rpx;
			.retu{
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 800;
				color: #353535;
				margin-bottom: 30rpx;
				display: block;
			}
			.remiao{
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #32303E;
			}
		}
		.kzhuyi{
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			margin: 0rpx 0 30rpx;
			.zhutit{
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 800;
				color: #FF6430;
			}
			.qumai{
				margin-left: 30rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 800;
				color: #0073FA;
			}
		}
	}
	.qiexian{
		width: 100%;
		height: 7rpx;
		margin-bottom: 50rpx;
		margin-top: 30rpx;
	}
	.keview{
		position: fixed;
		width: 184rpx;
		height: 64rpx;
		background: #216CFE;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		right: 15rpx;
		bottom: 30rpx;
		padding: 0 4rpx;
		// #ifdef H5
		bottom: 130rpx;
		// #endif
		// position: relative;
		.kefuicon{
			width: 56rpx;
			height: 56rpx;
		}
		text{
			display: inline-block;
			margin-left: 12rpx;
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}
		.btn{
			position: absolute;
			background-color: transparent;
			width: 100%;
			height: 100%;
			z-index: 1;
			border: none;
		}
		/deep/ button::after  {
			border: none;
		}
	}

	// 考试弹窗
	.kaoview{
		/deep/.u-mode-center-box{
			background-color: transparent;
		}
		.kaoone{
			width: 553prx;
			height: 741rpx;
			position: relative;
			.xuebg{
				position: absolute;
				width: 100%;
				height: 100%;
			}
			.kaoitems{
				position: relative;
				width: 100%;
				height: 100%;
				.kaotian{
					font-size: 60rpx;
					font-family: ZhenyanGB;
					font-weight: 400;
					color: #FFFFFF;
					display: inline-block;
					margin: 107rpx 0 0 48rpx;

				}
				.guan{
					position: absolute;
					width: 44rpx;
					height: 44rpx;
					right: 0;
					top: 20rpx;
				}
				.tianview{
					margin-top: 65px;
					width: 100%;
					height: 400rpx;
					padding-top: 20rpx;
					.tian{
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #353535;
						margin: 0 50rpx;
						display: inline-block;
						margin-top: 10rpx;
					}
					// background-color: #000;
				}
				.zhidao{
					width: 100%;
					height: 133rpx;
					position: relative;
					.zhidaobtn{
						position: absolute;
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}

	// 明细弹窗
	.mxiview{
		/deep/.u-mode-center-box{
			background-color: transparent;
		}
		.mingview{
			// margin: 30rpx;
			width: 90%;
			height: 884rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			margin: 0 auto;
			padding: 30rpx;
			.mhead{
				display: flex;
				flex-direction: row;
				align-items: center;
				position: relative;
				justify-content: center;
				margin-bottom: 50rpx;
				.mbiao{
					font-size: 37rpx;
					font-family: PingFang SC;
					font-weight: 800;
					color: #353535;
				}
				.lcha{
					position: absolute;
					right: 0;
					width: 44rpx;
					height: 44rpx;
				}
			}
			.one{
				width: 30%;
			}
			.two{
				width: 70%;
			}
			.flexrow{
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.xuone{
				height: 62rpx;
				background: #5961F5;
				border: 3px solid #5961F5;
				border-radius: 11rpx 11rpx 0rpx 0rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				
				.xuitem{
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					border-right: 1rpx solid #fff;
				}
				.xuitem:last-child{
					border-right: none;
				}

			}
			.xutwo{
				padding: 15rpx 0;
				display: flex;
				flex-direction: row;
				align-items: center;
			}

			.xuitemone{
				background: #FFFFFF;
				border: 2rpx solid #5961F5;
				border-radius: 10rpx;
			}
			.xutwo:nth-child(odd){
				background: rgba(176, 148, 242,0.49);
				// opacity: 0.49;
			}

			.xuhaoview{
				height: 600rpx;

			}
		}
	}
	.kaodian{
		font-size: 12px;

	}

</style>
